<template>
  <view class="ddzfile_item" @tap="viewFile(ele)" v-for="(ele,index) in fileList" :key="index">
    <img src="@/static/images/pdffile.png" alt="" />
    <view class="pdfNamebox">
      <view class="pdfName">{{ele.originalName}}</view>
      <view class="pdfSize">{{ ele.fsize }}</view>
    </view>
  </view>
</template>
<script setup>
import { ref, watch } from "vue";
import { getFileSize ,viewFile} from "@/utils/common";
const fileList =ref([])
const props = defineProps({
  fileList: {
    type: Array,
    default: () => {
      return [];
    },
  },
});
watch(
  () => props.fileList,
  (files) => {
    let list = [...files];
    if (list.length > 0) {
      list.forEach((ele) => {
        ele.fsize = getFileSize(ele.fileSize);
      });
    }
    fileList.value =list;
  },
  { deep: true, immediate: true }
);
</script>
<style lang="scss" scoped>
.ddzfile_item {
  display: flex;
  justify-content: center;
  width: 50%;
  margin-bottom: 30rpx;

  img {
    width: 60rpx;
    height: 66rpx;
    margin-right: 26rpx;
  }
  .pdfNamebox {
    .pdfName {
      width: 220rpx;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .pdfSize {
      font-size: 24rpx;
      color: #3f3f3f;
      margin-top: 6rpx;
    }
  }
}
</style>
